import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    ListView,
    ActivityIndicator,
} from 'react-native';
import HttpUtils from '../common/HttpUtils'

const host = 'http://sxakjc.com//api/sas/treeList';
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class TreeList extends Component {
    static navigationOptions = ({navigation}) => {
        const params = navigation.state.params || {};

        return {
            headerTitle: params.title,
        };
    }

    constructor(props) {
        super(props);
        this.state = {
            dataSource: ds.cloneWithRows([]),
            params: this.props.navigation.state.params,
            isLoading: true,
        }
    }

    componentWillMount() {
        let url = host + '?token=' + this.state.params.token + '&target=' + this.state.params.target + '&include=children';

        if (this.state.params.scope) {
            url += '&scope=' + this.state.params.scope
        }

        HttpUtils.get(url)
            .then((ret) => {
                this.setState({
                    dataSource: ds.cloneWithRows(ret.data),
                    isLoading: false,
                })
                console.log(ret);
            })
    }

    toTreeList(item) {
        this.props.navigation.navigate('TreeList', {
            title: this.state.params.title + ' - ' + item.title,
            token: this.state.params.token,
            target: this.state.params.target,
            scope: item.id,
            type: this.state.params.title
        })
    }

    toManageInfo(item) {
        this.props.navigation.navigate('ManageInfo', {
            title: this.state.params.type + '信息',
            token: this.state.params.token,
            target: this.state.params.target,
            id: item.id
        })
    }

    renderRow(item) {
        return <View style={styles.row}>
            <TouchableOpacity
                onPress={() => {
                    !this.state.params.scope ? this.toTreeList(item) : this.toManageInfo(item)
                }}
            >
                <Text style={styles.text}>{item.title}</Text>
                <View style={styles.line}></View>
            </TouchableOpacity>
        </View>
    }

    render() {
        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item) => this.renderRow(item)}
                />
                <View style={styles.loadingBox}>
                    <ActivityIndicator
                        animating={this.state.isLoading}
                        style={[styles.loadingBox]}
                        size="large"
                        color="#387ef5"
                    />
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "white",
        paddingTop: 20
    },
    text: {
        fontSize: 16,
        color: "#000",
        justifyContent: "center",
        margin: 15,
        marginLeft: 0
    },
    row: {
        paddingLeft: 40,
        paddingRight: 20
    },
    line: {
        height: 1,
        backgroundColor: "#ccc"
    },
    loadingBox: {
        // display: "none",
        position: 'absolute',
        left: 0,
        right: 0,
        top: 100,
    }
})